<!--这是城市页面-->
<template>
	<div>
		<city-header></city-header>
		<!--引入子组件-->
		<city-search :cities="cities"></city-search>
		<city-list :cities="cities" :hot="hotCities" :letter="letter"></city-list>
		<!--引入子组件的时候传入参数及方法-->
		<city-alphabet :cities="cities" @change="handleLetterClick"></city-alphabet>
	</div>
</template>

<script>
	import axios from 'axios'
	import CityHeader from './components/Header.vue'
	import CitySearch from './components/Search.vue'
	import CityList from './components/List.vue'
	import CityAlphabet from './components/Alphabet.vue'
	export default{
		name:'City',
		components:{
//			注册子组件，大写变成小写，中间用-连接。eg：注册为CityHeader，使用时用<city-header>标签
			CityHeader,
			CitySearch,
			CityList,
			CityAlphabet
		},
		data (){
//			数据需要用return做统一返回
			return {
				cities:{},
				hotCities:[],
				letter:''
			}
		},
		
//		定义方法
		methods:{
			getCityInfo (){
//				利用axios发送ajax请求,.then()为成功后调用的方法
				axios.get('api/city.json').then(this.handleGetCityInfoSucc)
			},
//			成功后返回参数在res
			handleGetCityInfoSucc (res){
				res = res.data;
//				判断成功后是否有参数
				if(res.ret && res.data){
					const data = res.data;
//					所有的this都能调用自身定义的变量
					this.cities = data.cities;
					this.hotCities = data.hotCities;
				}
			},
			handleLetterClick(letter){
				this.letter = letter;
			}
		},
		mounted (){
			this.getCityInfo();
		}
	}
</script>

<style lang="stylus" scoped>
	
</style>